<template>
  <div class="project-list" style="margin: 15px">
    <el-card style="width: 100%; height: 85vh">
      <!-- 标题头 -->
      <div slot="header" style="padding-bottom: 10px">
        <span style="display: flex; align-items: center; font-size: 18px">
          <img
            src="@/assets/img/jsje.png"
            style="height: 20px; width: 20px; margin-right: 5px"
          />
          结算金额</span
        >
      </div>
      <!-- <div class="xhxBox"></div> -->
      <!-- 项目内容 -->
      <div>
        <div v-show="settlementList.length == 0" style="height: 75vh">
          <el-empty :image-size="250"></el-empty>
        </div>

        <!-- 切换表头 -->
        <div class="headDbox">
          <div
            :class="activeName == item.id ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick(item.id)"
            v-for="item in settlementList"
            :key="item.id"
          >
            <span style="font-size: 18px">{{ item.settleName }}</span>
          </div>
        </div>
        <div class="xhxBox" v-show="settlementList.length > 0"></div>
        <!-- 标题 -->
        <div
          v-for="item in settlementList"
          class="titemBox"
          v-show="activeName == item.id"
          :key="item.id"
        >
          {{ item.settleName }}
        </div>
        <!-- 结算金额内容 -->
        <div class="mainBox" v-if="settlementList.length > 0">
          <el-form
            ref="formNameRef"
            :model="item"
            :rules="formRules"
            size="medium"
            label-width="50px"
            label-position="right"
            v-for="item in formName"
            :key="item.id"
          >
            <el-col :span="5" style="margin-left: 150px; margin-top: 25px">
              <el-form-item
                :label="item.label"
                :prop="item.prop"
                style="position: relative"
              >
                <el-input
                  v-model.trim="item.param"
                  maxlength="7"
                  :placeholder="'请输入' + item.label"
                  clearable
                  :style="{ width: '100%' }"
                  @change="numerChange(item)"
                >
                </el-input>
                <span v-show="item.stast" class="inputShowText"
                  >不可大于上级</span
                >
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="xhxBox_mini"></div>
        <div class="buttonBox">
          <el-button
            type="primary"
            icon="el-icon-top"
            :disabled="ButtonShow"
            @click="submitForm"
            >提交</el-button
          >
          <el-button
            @click="resetForm"
            icon="el-icon-refresh"
            style="color: #1890ff"
            >重置</el-button
          >
        </div>
      </div>
    </el-card>
    <!-- 公告弹窗 -->
    <Dialog
      ref="mychild"
      @AddAnnouncement="AddAnnouncement"
      :uelLocation="uelLocation"
    />
  </div>
</template>

<script>
import {
  getBasisList,
  insertLevel,
  selectByOne,
  updateLevel,
} from "@/api/projectManagement/index.js";
import { getIdentityAndTopId } from "@/api/login.js";
import Dialog from "@/views/components/Dialog.vue";
export default {
  data() {
    return {
      //修改还是新增
      stastCode: "",
      formName: [
        {
          label: "一级",
          prop: "param",
          field101: "",
          param: "0",
          id: "1",
          stast: false,
        },
        {
          label: "二级",
          prop: "param",
          field102: "",
          param: "0",
          id: "2",
          stast: false,
        },
        {
          label: "三级",
          prop: "param",
          field103: "",
          param: "0",
          id: "3",
          stast: false,
        },
        {
          label: "四级",
          prop: "param",
          field104: "",
          param: "0",
          id: "4",
          stast: false,
        },
        {
          label: "五级",
          prop: "param",
          field105: "",
          param: "0",
          id: "5",
          stast: false,
        },
        {
          label: "六级",
          prop: "param",
          field106: "",
          param: "0",
          id: "6",
          stast: false,
        },
        {
          label: "七级",
          prop: "param",
          field107: "",
          param: "0",
          id: "7",
          stast: false,
        },
        {
          label: "八级",
          prop: "param",
          field108: "",
          param: "0",
          id: "8",
          stast: false,
        },
        {
          label: "九级",
          prop: "param",
          field109: "",
          param: "0",
          id: "9",
          stast: false,
        },
        {
          label: "十级",
          prop: "param",
          field110: "",
          param: "0",
          id: "10",
          stast: false,
        },
      ],
      formRules: {
        param: [
          {
            required: true,
            message: "不可为空",
            trigger: "change",
          },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "金额格式错误",
            trigger: "change",
          },
        ],
      },
      settlementList: [],
      userId: "",
      //切换结算名称
      activeName: "",
      //租户还是用户
      userName: "",
      uelLocation: null,
    };
  },
  async created() {},
  async mounted() {
    this.userId = sessionStorage.getItem("userID") - 0;
    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    // //console.log(data, "用户信息平台还是租户");
    this.userName = data.identity;
    //公告弹窗
    if (data.identity == "用户") {
      this.AddAnnouncement();
    }
    this.getList();
  },
  methods: {
    async getList() {
      //获取结算设置的数据
      const dataList = await getBasisList({
        projectId: this.$route.query.proId - 0,
      });
      // //console.log(dataList, "++++++++0000");
      if (dataList.code == 200) {
        this.settlementList = dataList.data;
        this.activeName = dataList.data[0].id;
        this.getSelectByOne();
      } else {
        this.$message.error(dataList.msg);
      }
    },
    async getSelectByOne() {
      let param = {
        projectId: this.$route.query.proId - 0,
        templateId: this.$route.query.templateId - 0,
        settleId: this.activeName, //提交的这个id
        isLevel: 1, //开启关闭，传死1
      };
      const data = await selectByOne(param);
      // //console.log(data, "888");
      if (data.code == 200) {
        if (data.data.id) {
          this.stastCode = data.data.id;
          if (data.data.levelData != null) {
            let arr = data.data.levelData.split(",");
            var list = [];
            let hh = [
              "一级",
              "二级",
              "三级",
              "四级",
              "五级",
              "六级",
              "七级",
              "八级",
              "九级",
              "十级",
            ];
            // //console.log(arr, "999");
            arr.forEach((item, index) => {
              // //console.log(index, "+++");
              list.push({
                label: hh[index],
                prop: "param",
                field101: "",
                param: item,
                id: index,
                stast: false,
              });
            });
            this.formName = list;
            // //console.log(data.data.id, "999");
          } else {
            this.formName = [
              {
                label: "一级",
                prop: "param",
                field101: "",
                param: "0",
                id: "1",
                stast: false,
              },
              {
                label: "二级",
                prop: "param",
                field102: "",
                param: "0",
                id: "2",
                stast: false,
              },
              {
                label: "三级",
                prop: "param",
                field103: "",
                param: "0",
                id: "3",
                stast: false,
              },
              {
                label: "四级",
                prop: "param",
                field104: "",
                param: "0",
                id: "4",
                stast: false,
              },
              {
                label: "五级",
                prop: "param",
                field105: "",
                param: "0",
                id: "5",
                stast: false,
              },
              {
                label: "六级",
                prop: "param",
                field106: "",
                param: "0",
                id: "6",
                stast: false,
              },
              {
                label: "七级",
                prop: "param",
                field107: "",
                param: "0",
                id: "7",
                stast: false,
              },
              {
                label: "八级",
                prop: "param",
                field108: "",
                param: "0",
                id: "8",
                stast: false,
              },
              {
                label: "九级",
                prop: "param",
                field109: "",
                param: "0",
                id: "9",
                stast: false,
              },
              {
                label: "十级",
                prop: "param",
                field110: "",
                param: "0",
                id: "10",
                stast: false,
              },
            ];
          }
        } else {
          this.stastCode = "";
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    //监听输入框
    numerChange(row) {
      // //console.log(row,'+696');
      // 不是一级并且如果大于上一级的金额就等于true
      if (row.id != 1 && row.param - 0 > this.formName[row.id - 2].param - 0) {
        row.stast = true;
      } else {
        row.stast = false;
      }
    },
    //切换结算名称
    handleClick(row) {
      this.activeName = row;
      this.getSelectByOne();
    },
    //提交按钮
    async submitForm() {
      // //console.log(this.activeName, "666");
      // //console.log(this.stastCode, "修改ID");
      // //console.log(this.formName, "777");
      let arr = "";
      this.formName.map((item) => {
        arr += item.param + ",";
      });
      //去掉最后一个逗号(如果不需要去掉，就不用写)
      if (arr.length > 0) {
        arr = arr.substr(0, arr.length - 1);
      }
      // //console.log(arr, "777");
      let param = {};
      if (this.stastCode) {
        param = {
          // projectId: this.$route.query.proId - 0,
          // templateId: this.$route.query.templateId - 0,
          id: this.stastCode,
          isLevel: 1, //开启关闭，传死1
          levelData: arr,
        };

        const data = await updateLevel(param);
        // //console.log(data, "修改返回");
        if (data.code == 200) {
          this.$message({
            message: "操作成功!",
            type: "success",
          });
           this.$router.push({
            path: "/base/TemplateDetails",
            query: {
              templateId: this.$route.query.templateId - 0,
            },
          });
          // this.getSelectByOne();

         
        } else {
          this.$message.error(data.msg);
        }
      } else {
        param = {
          projectId: this.$route.query.proId - 0,
          settleId: this.activeName, //提交的这个id
          templateId: this.$route.query.templateId - 0,
          isLevel: 1, //开启关闭，传死1
          levelData: arr,
        };
        const data = await insertLevel(param);
        // //console.log(data, "返回");
        if (data.code == 200) {
          this.$message({
            message: "操作成功!",
            type: "success",
          });
          this.getSelectByOne();
        } else {
          this.$message.error(data.msg);
        }
      }
    },
    resetForm() {
      this.formName = [
        {
          label: "一级",
          prop: "param",
          field101: "",
          param: "0",
          id: "1",
          stast: false,
        },
        {
          label: "二级",
          prop: "param",
          field102: "",
          param: "0",
          id: "2",
          stast: false,
        },
        {
          label: "三级",
          prop: "param",
          field103: "",
          param: "0",
          id: "3",
          stast: false,
        },
        {
          label: "四级",
          prop: "param",
          field104: "",
          param: "0",
          id: "4",
          stast: false,
        },
        {
          label: "五级",
          prop: "param",
          field105: "",
          param: "0",
          id: "5",
          stast: false,
        },
        {
          label: "六级",
          prop: "param",
          field106: "",
          param: "0",
          id: "6",
          stast: false,
        },
        {
          label: "七级",
          prop: "param",
          field107: "",
          param: "0",
          id: "7",
          stast: false,
        },
        {
          label: "八级",
          prop: "param",
          field108: "",
          param: "0",
          id: "8",
          stast: false,
        },
        {
          label: "九级",
          prop: "param",
          field109: "",
          param: "0",
          id: "9",
          stast: false,
        },
        {
          label: "十级",
          prop: "param",
          field110: "",
          param: "0",
          id: "10",
          stast: false,
        },
      ];
    },
    //公告弹窗
    AddAnnouncement() {
      //传递子组件当前的路由；然后调用子组件的事件函数
      this.uelLocation = window.location.pathname.slice(1);
      this.$refs.mychild.gitData();
    },
  },
  computed: {
    ButtonShow() {
      return this.formName.some((item) => item.param == "");
    },
  },
  components: { Dialog },
};
</script>
<style scoped lang="scss">
// 标题
.titemBox {
  // border: 1px red solid;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  font-size: 18px;
}
.headDbox {
  // border: 1px red solid;
  margin-bottom: 15px;
  display: flex;
  .hedaNameBox {
    cursor: pointer;
    margin-right: 25px;
    color: #999999;
    padding: 0px 10px 5px 10px;
    // border-right: 1px #eee solid;
    // border: 1px red solid;
  }
  .hedaNameBox2 {
    cursor: pointer;
    color: rgb(24, 144, 255);
    margin-right: 25px;
    padding: 0px 10px 5px 10px;
    // border-right: 1px #eee solid;
    border-bottom: 2px rgb(24, 144, 255) solid;
  }
}
.mainBox {
  margin-top: 40px;
  margin: 30px auto;
  // margin-left: 10px;
  width: 65%;
  height: 45vh;
  //  border: 1px red solid;
  .inputShowText {
    // border: 1px red solid;
    position: absolute;
    display: flex;
    padding: 0px;
    top: 28px;
    left: 100px;
    font-size: 12px;
    color: red;
  }
}
.xhxBox_mini {
  height: 5px;
  border-top: 1px #eee solid;
  width: 50%;
  margin: 0 auto;
}
.buttonBox {
  // margin: 0 auto;
  display: flex;
  margin-top: 20px;
  justify-content: center;
  //  border: 1px red solid;
}
::v-deep .el-progress {
  // border: 1px red solid;
  display: flex;
  align-items: center;
}
.project-button div:not(:last-child) {
  margin-right: 10px;
  margin-top: 20px;
}

.xhxBox {
  border-top: 1px #eee solid;
  height: 5px;
  // border: 1px red solid;
}
</style>
<style>
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
.project-list .el-date-editor .el-range-separator {
  width: 15%;
}

.project-list .el-form-item--medium .el-form-item__content {
  width: 200px;
}

.project-list .status-switch {
  line-height: 1;
  font-size: 14px;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  margin-left: 5px;
}

.project-list .project-button img {
  margin-right: 3px;
}

.project-list .project-button img:last-child {
  margin-left: 3px;
}

.project-list {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.project-list .el-dropdown-menu__item {
  font-size: 14px;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #f5f5f5 !important;
  color: #5c8af6 !important;
}

.project-list .el-divider--horizontal {
  background: #f0f0f0;
}

.project-list .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border-bottom: 1px #eee solid;
}
</style>
